<template>
  <div class="app-container">
    <div class="mapDiv">
      <!--地图-->
      <IndexMap v-if="completeRefreshData==true"
                :allRadioIndexData="allRadioIndexData"
                :allListData="allListData"
                :typeCodeDataList="typeCodeDataList"
                :resetClearAllBool="resetClearAllBool"
                :dataTypeInfoArray="dataTypeInfoArray"
                @getDetailDataById="getDetailDataById"
                @getLegendHtml="getLegendHtml"
                @getDownloadName="getDownloadName"
      ></IndexMap>
    </div>
    <!--<div id="indexMap-mapDiv" class="ol-popup">
      &lt;!&ndash;图层图例&ndash;&gt;
      <div v-if="showHideLegendDivBool" class="layerMap-legend">
        &lt;!&ndash;滚动条&ndash;&gt;
        <el-scrollbar max-height="500px">
          <p>图例</p>
          <div v-for="item in layerShowHideArray" :key="item.code" v-show="item.show" v-html="item.legendHtml">
          </div>
        </el-scrollbar>
      </div>
    </div>-->
  </div>
</template>

<script setup name="historySettingPoint">
//地图
import IndexMap from '@/views/earthquakeLossesEstimation/historySettingPoint/indexMap.vue';
import { iServerHttp } from "@/map/projMap.js"

const { proxy } = getCurrentInstance();

/*地图传参start*/
const completeRefreshData = ref(false);//防止刷新后地图不显示
const allListData = ref([]);//地图显示数据列表
const typeCodeDataList = ref([]);//选择图层的版本号数据列表
const allRadioIndexData = ref([]);//全部序号列表
const resetClearAllBool = ref(false);//是否重置清空全部图层数组
//数据类型
const dataTypeInfoArray = ref([
  {name: '历史设定地震点数据', radioLabel:"lssddzdsj",code:"lssddzdsj",table:"",url:iServerHttp()+"/iserver/services/map-shpypg/rest/maps/历史设定地震点数据",zIndex:8,fieldId:"SmID"},
  // {name: '五代图全国断裂', radioLabel:"wdtqgdl",code:"wdtqgdl",table:"",url:iServerHttp()+"/iserver/services/map-shpypg/rest/maps/五代图全国断裂",zIndex:6,fieldId:"SmID"},
  {name: '五代图全国断裂LZ', radioLabel:"wdtqgdllz",code:"wdtqgdllz",table:"",url:iServerHttp()+"/iserver/services/map-shpypg/rest/maps/五代图全国断裂LZ",zIndex:6,fieldId:"SmID"},
]);
const showHideLegendDivBool = ref(false);//是否显示图例
const layerShowHideArray = ref([]);//图层是否显示数组
//图例
const getLegendHtml = (obj)=>{
  //图层显示隐藏数组
  let showHideArray = layerShowHideArray.value;
  if(obj!=null){
    for(let i=0;i<showHideArray.length;i++){
      if(showHideArray[i].name==obj.name){
        showHideArray[i].show = obj.show;
        showHideArray[i].legendHtml = obj.legendHtml;//显示图例
        break;
      }
    }
    //是否显示图例
    let bool = false;
    for(let i=0;i<showHideArray.length;i++){
      if(showHideArray[i].show){
        bool = true;
        break;
      }
    }
    showHideLegendDivBool.value = bool;
  }else{//清空图例
    //是否显示图例
    for(let i=0;i<showHideArray.length;i++){
      showHideArray[i].show = false;
    }
    showHideLegendDivBool.value = false;
  }
}

//根据ID查询数据属性表
const getDetailDataById = (temp)=>{

}
//下载文件
const getDownloadName = (name)=>{
  importTemplate(name);
}
/*地图传参end*/

//设置图例数组
function setLayerShowHideArray(){
  let showHideArray = [];
  let dataTypeArray = dataTypeInfoArray.value;
  for(let i=0;i<dataTypeArray.length;i++){
    let item = dataTypeArray[i];
    showHideArray.push({ code: item.code, name: item.name, show:false,legendHtml:"" });
  }
  layerShowHideArray.value = showHideArray;
}

//初始化设置全部超图图层所需数据
function initAllLayerDataArray(){
  let typeCodeDataArray = [];
  let allRadioIndexArray = [];
  let childrenData = [];
  let list = [
    {dictItemName:"历史设定地震点数据",dictItemCode:"lssddzdsj"},
    // {dictItemName:"五代图全国断裂",dictItemCode:"wdtqgdl"},
    {dictItemName:"五代图全国断裂LZ",dictItemCode:"wdtqgdllz"}
  ];
  if(list!=null && list.length>0){
    for(let i=0;i<list.length;i++){
      let data = list[i];
      childrenData.push({
        name: data.dictItemName,
        radioLabel: data.dictItemCode,
        dictItemCode: data.dictItemCode,
        spaceBool:true,//是否空间数据
      });
      //选择图层的版本号数据列表
      typeCodeDataArray.push({
        name: data.dictItemName,
        radioLabel: data.dictItemCode,
        dictItemCode: data.dictItemCode,
        spaceBool:true,//是否空间数据
        typeCodeSelectData:[],
      });
      //全部序号列表
      allRadioIndexArray.push(data.dictItemCode);
    }
  }
  //选择图层的版本号数据列表
  typeCodeDataList.value = typeCodeDataArray;
  //全部序号列表
  allRadioIndexData.value = allRadioIndexArray;
}

//下载文件
function importTemplate(name) {
  proxy.download("/base/product/downloadExcel", {
    fileName:name
  }, name);
}

onMounted(() => {
  setLayerShowHideArray();//设置图例数组
  initAllLayerDataArray();//初始化设置全部超图图层所需数据
  //显示地图模块
  completeRefreshData.value = true;
})
</script>

<style scoped lang="scss">
.mapDiv {
  position:absolute;top:0px;left:0px;width:100%;height:100%;
}

//图例
.layerMap-legend {
  position: absolute;
  right: 10px;
  bottom: 10px;
  min-height: 50px;
  background: #fff;
  padding: 10px;
  overflow: auto;
  min-width: 200px;
  box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
  border:1px solid #707070;
  border-radius: 4px;
}
.layerMap-legend p:first-child{
  text-align: center;font-weight: bold;
}

</style>